<template>
  <div class="logo">
    <div class="logoBorder">
      <div class="logoBorders">
        <div class="logoImg"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
name: "location"
}
</script>

<style lang="scss" scoped>
@import "../assets/style/common.scss";
@import "../assets/style/scfunction.scss";

@keyframes borderDisplay {
  0% { border-color: rgba(252, 252, 252, 0.6) }
  25% { border-color: rgba(0, 0, 0, 0) }
  50% { border-color: rgba(252, 252, 252, 0.6) }
  75% { border-color: rgba(0, 0, 0, 0) }
  100% { border-color: rgba(252, 252, 252, 0.6) }
}
@keyframes borderDisplays {
  0% { border-color: rgba(0, 0, 0, 0) }
  25% { border-color: rgba(252, 252, 252, 0.6) }
  50% { border-color: rgba(0, 0, 0, 0) }
  75% { border-color: rgba(252, 252, 252, 0.6) }
  100% { border-color: rgba(0, 0, 0, 0) }
}

.logo {
  width: 78px;
  height: 91px;
  position: absolute;
  z-index: 10;
  background: url("/image/zuoBiao.png") no-repeat;
  .logoBorder {
    width: 76px;
    height: 76px;
    border: 1px solid #fcfcfc;
    border-radius: 50%;
    animation: borderDisplays 4s linear infinite;
    .logoBorders {
      width: 60px;
      height: 60px;
      border: 1px solid #fcfcfc;
      border-radius: 50%;
      animation: borderDisplay 4s linear infinite;
      margin: 8px;
    }
  }
  .logoImg {
    width: 50px;
    height: 50px;
    margin: 6px auto;
    background: url("/image/logo.png") no-repeat;
    background-position: 33% 0%;
  }
}
</style>